import React, { useEffect } from 'react';
import './index.css';
import { renderToString } from 'react-dom/server'
import Editor from './editor';
import Goods from './components/Goods'

const Index = ({ data, dispatch }) => {
    let editor = null;
    useEffect(() => {
        editor = new Editor('#editor');
        editor.initEvent('click', (e) => {
            console.log('element clicked ', e);
            e && e.target && e.target.select && e.target.select();
        });
    }, []);

    const execCod = (cmd, aShowDefaultUI, aValueArgument) => {
        // let selection = editor.getSelection(); // 获取选取
        // selection.save();
        let args = null;
        editor.execCommand(cmd, aShowDefaultUI, aValueArgument);
    }

    const insertNode = () => {
        const dd = document.createElement('div');
        dd.textContent = "xxxxxx"
        const clicked = () => {
            console.log("元素冒泡事件");
        }
        const domStr = renderToString(<Goods onClick={clicked} />);
        console.log(domStr);
        const ele = editor.execCommand('insertHTML', domStr);
        console.log('ele', ele);
        editor.saveSelection();
        // getSelection.insertNode(dd)
        //     editor.execCommand('insertHTML', `<div class="readOnly insertNode" style="color: red;background-color: beige;"  >
        //     这里是内嵌iframe222
        // </div>`);
        // execCod('insertHTML', `<!DOCTYPE html>
        // <html lang="en">
        // <head>
        //     <meta charset="UTF-8">
        //     <meta name="viewport" content="width=device-width, initial-scale=1.0">
        //     <title>Document</title>
        //     <style>
        //         .icontent{
        //             background-color: gray;
        //             color: red;
        //         }
        //     </style>
        // </head>
        // <body>
        //     <div class="icontent">
        //         这里是内嵌iframe
        //     </div>
        // </body>
        // </html>`)

    }

    return (
        <div id="333" className="editContain">
            <div className="tools">
                <button onClick={() => execCod('bold')}>加粗</button>
                <button onClick={() => execCod('italic')}>斜体</button>
                <button onClick={() => execCod('underline')}>下划线</button>
                <button onClick={() => execCod('strikeThrough')}>删除线</button>
                <button onClick={() => execCod('redo')}>前进</button>
                <button onClick={() => execCod('undo')}>后退</button>
                <button onClick={() => insertNode()}>插入</button>
                <button onClick={() => execCod('insertImage', 'https://images0.cnblogs.com/blog/625679/201502/271504146435698.png')}>插入图片</button>

            </div>
            <iframe id="editor" width="100%" height="100%" frameborder="0" title="文章编辑器"></iframe>
            <Goods />
        </div>
    );
};
export default Index;
